<template>
  <a-spin :loading="loading" style="width: 100%; height: 100%">
    <a-card
      class="general-card"
      :title="title"
      :header-style="{ paddingBottom: '12px' }"
      style="position: center"
    >
      <div class="content">
        <template> 总回答人数： </template>
        <a-statistic
          :value="count"
          :show-group-separator="true"
          :value-from="0"
          animation
        />
      </div>
      <div class="chart" style="height: 220px">
        <div
          ref="CloudArea"
          style="width: 100%; height: 100%; margin: 0; padding: 0"
        />
      </div>
    </a-card>
  </a-spin>
</template>

<script>
  import * as echarts from 'echarts';
  import 'echarts-wordcloud';

  const mask = new Image();
  // mask.src = ""
  mask.src =
    '';
  // '';
  export default {
    name: 'CloudArea',
    props: {
      currentTab: String,
      title: String,
      count: Number,
    },
    data() {
      return {
        chart: '',
      };
    },
    // watch: {
    //   currentTab() {
    //     this.initEcharts(this.currentTab);
    //   },
    // },
    mounted() {
      this.$nextTick(() => {
        this.initChart();
        window.addEventListener('resize', this.screenAdapter);
        this.screenAdapter();
      });
    },
    methods: {
      initChart() {
        // eslint-disable-next-line no-shadow
        this.chart = echarts.init(this.$refs.CloudArea); // 获取到容器的节点，初始化echarts实例
        const option = {
          // 指定配置项和数据

          tooltip: {
            // show: false,
            // // formatter: '{b}<br/>{c} '
          },
          textStyle: {
            color() {
              return `rgb(${[
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
              ].join(',')})`;
            },
          },

          series: [
            {
              type: 'wordCloud',
              // gridSize: 2,
              // sizeRange: [12, 50],
              // // rotationRange: [-90, 90],
              // rotationRange: [-50, 50],

              gridSize: 1,
              sizeRange: [12, 55],
              rotationRange: [-45, 0, 45, 90],

              // shape: 'triangle',
              // width: 100,
              // height: 400,
              // maskImage:
              //   '',
              // '',
              // '',

              maskImage: mask,
              // maskeImage:"",
              data: [
                {
                  name: '花鸟市场',
                  value: 1446,
                },
                {
                  name: '汽车',
                  value: 928,
                },
                {
                  name: '视频',
                  value: 906,
                },
                {
                  name: '电视',
                  value: 825,
                },
                {
                  name: 'Lover Boy 88',
                  value: 514,
                },
                {
                  name: '动漫',
                  value: 486,
                },
                {
                  name: '音乐',
                  value: 53,
                },
                {
                  name: '直播',
                  value: 163,
                },
                {
                  name: '广播电台',
                  value: 86,
                },
                {
                  name: '戏曲曲艺',
                  value: 17,
                },
                {
                  name: '演出票务',
                  value: 6,
                },
                {
                  name: '给陌生的你听',
                  value: 1,
                },
                {
                  name: '资讯',
                  value: 1437,
                },
                {
                  name: '商业财经',
                  value: 422,
                },
                {
                  name: '娱乐八卦',
                  value: 353,
                },
                {
                  name: '军事',
                  value: 331,
                },
                {
                  name: '科技资讯',
                  value: 313,
                },
                {
                  name: '社会时政',
                  value: 307,
                },
                {
                  name: '时尚',
                  value: 43,
                },

                {
                  name: '比价',
                  value: 201,
                },
                {
                  name: '海淘',
                  value: 195,
                },
                {
                  name: '移动APP购物',
                  value: 179,
                },
                {
                  name: '支付方式',
                  value: 119,
                },
                {
                  name: '代购',
                  value: 43,
                },
                {
                  name: '体育健身',
                  value: 1234,
                },
                {
                  name: '体育赛事项目',
                  value: 802,
                },
                {
                  name: '运动项目',
                  value: 405,
                },
                {
                  name: '体育类赛事',
                  value: 337,
                },
                {
                  name: '健身项目',
                  value: 199,
                },
                {
                  name: '健身房健身',
                  value: 78,
                },
                {
                  name: '运动健身',
                  value: 77,
                },
                {
                  name: '家庭健身',
                  value: 36,
                },
                {
                  name: '健身器械',
                  value: 29,
                },
                {
                  name: '办公室健身',
                  value: 3,
                },
                {
                  name: '商务服务',
                  value: 1201,
                },
                {
                  name: '法律咨询',
                  value: 508,
                },
                {
                  name: '化工材料',
                  value: 147,
                },
                {
                  name: '广告服务',
                  value: 125,
                },
                {
                  name: '会计审计',
                  value: 115,
                },
                {
                  name: '人员招聘',
                  value: 101,
                },
                {
                  name: '印刷打印',
                  value: 66,
                },
                {
                  name: '知识产权',
                  value: 32,
                },
                {
                  name: '翻译',
                  value: 22,
                },
                {
                  name: '安全安保',
                  value: 9,
                },
                {
                  name: '公关服务',
                  value: 8,
                },
                {
                  name: '商旅服务',
                  value: 2,
                },
                {
                  name: '展会服务',
                  value: 2,
                },
                {
                  name: '特许经营',
                  value: 1,
                },
                {
                  name: '休闲爱好',
                  value: 1169,
                },
                {
                  name: '收藏',
                  value: 412,
                },
              ],
            },
          ],
        };
        this.chart.setOption(option); // 使用刚指定的配置项和数据显示图表。
      },
      screenAdapter() {
        // 获取自适应大小
        const titleFontSize = (this.$refs.CloudArea.offsetWidth / 100) * 3.6;
        // eslint-disable-next-line no-console
        console.log('titleFontSize', titleFontSize);
        // 自适应配置
        const adapterOption = {
          title: {
            textStyle: {
              fontSize: titleFontSize, // 自适应字体大小
            },
          },
          legend: {
            // 图例组件
            itemWidth: titleFontSize / 2,
            itemHeight: titleFontSize / 2,
            itemGap: titleFontSize / 2,
            textStyle: {
              fontSize: titleFontSize / 2, // 自适应字体大小
            },
          },
        };
        this.chart.setOption(adapterOption);
        // 自适应
        this.chart.resize();
      },
    },
  };
</script>

<style scoped lang="less">
  .general-card {
    min-height: 204px;
  }

  .content {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 12px;
  }

  .percent-text {
    margin-left: 16px;
  }

  .chart {
    width: 100%;
    height: 80px;
    vertical-align: bottom;
  }

  .unit {
    padding-left: 8px;
    font-size: 12px;
  }

  .label {
    padding-right: 8px;
    font-size: 12px;
  }
</style>
